<template>
  <div class="tui-button-group" :class="[shapeClass, verticalClass]">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { TuiButtonGroupProps } from './types';

const props = withDefaults(defineProps<TuiButtonGroupProps>(), {
  shape: 'default',
  vertical: false
});

const shapeClass = computed(() => props.shape ? `tui-button-group--${props.shape}` : '');
const verticalClass = computed(() => props.vertical ? 'tui-button-group--vertical' : 'tui-button-group--horizontal');
</script>

<style lang="scss" scoped>
.tui-button-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1px;

  &--vertical {
    flex-direction: column;
  }

  // 大小样式
  &--small {
    >.tui-button {
      padding: 4px 8px;
      font-size: 12px;
    }
  }

  &--medium {
    >.tui-button {
      padding: 8px 16px;
      font-size: 14px;
    }
  }

  &--large {
    >.tui-button {
      padding: 12px 24px;
      font-size: 16px;
    }
  }
}
</style>